<template>
    <div>
        <!-- 属性管理 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button :disabled="scope.row.disable" class="cursor" @click="handleEdit(scope.$index, scope.row)">
                        <span :style="{ color: scope.row.disable ? '#888' : '#0052D9' }">配置</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="Tips" width="700" :before-close="handleClose">
            <div style="border: 1px solid #F00;display: flex;justify-content:flex-end;" @click="addKuang">新增分类</div>
            <div style="display: flex;">
                <div style="width: 40%;">
                    <div style="padding: 10px;">
                        <div v-for="(item, index) in leftItems" :key="index"
                            style="border: 1px solid #F00;margin-top: 10px;" draggable="true"
                            @dragstart="onDragStart(item, index)">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div style="width: 60%">
                    <div v-for="(container, containerIndex) in list" :key="containerIndex"
                        style="width: 100%;height:100px;border: 1px solid #ccc;margin-top: 10px;" @dragover.prevent
                        @drop="onDrop(containerIndex)">

                        <div>
                            <div style="display: flex; ">
                                <div style="width:60%;border: 1px solid #eee;"> <el-input v-model="container.input"
                                        placeholder="Approved by" clearable /></div>
                                <div style="width:30%;border: 1px solid #eee; margin-left: 10px;"> <el-select
                                        v-model="container.select" placeholder="Activity zone" clearable>
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select></div>
                            </div>
                        </div>
                        <div v-for="(item, index) in container.lists" :key="index" class="item">
                            <span>{{ item }}</span>
                            <!-- <el-button type="danger" icon="el-icon-close"
                                @click="removeItem(containerIndex, index)"></el-button> -->
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="confirms">Confirm</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { handeQuene } from '@/api/product/demo.js'
import { onMounted, ref } from 'vue'

onMounted(() => {
    handeQuene(6)
})

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const list = ref([
    { input: "", select: "", lists: [] },
    { input: "", select: "", lists: [] },
    { input: "", select: "", lists: [] },
])

const dialogVisible = ref(false)
const formInline = ref({
    user: '',
    region: '',
})

const leftItems = ref(['a', 'b', 'c', 'd', 'e', 'f'])

function handleEdit(index, row) {
    console.log(index, row)
    dialogVisible.value = true
}

function onDragStart(item, index) {
    event.dataTransfer.setData('item', item)
    event.dataTransfer.setData('index', index)
}

function onDrop(containerIndex) {
    const item = event.dataTransfer.getData('item')
    const index = event.dataTransfer.getData('index')
    list.value[containerIndex].lists.push(item)
    leftItems.value.splice(index, 1)
}

function removeItem(containerIndex, index) {
    const item = list.value[containerIndex].lists.splice(index, 1)[0]
    leftItems.value.push(item)
}

function addKuang() {
    list.value.push({ input: "", select: "", lists: [] })
}
function confirms() {
    console.log(list.value)
    dialogVisible.value = false
    list.value = [{ input: "", select: "", lists: [] },]

}
</script>

<style>
/* Add any additional styles here */
</style>